<!--
    group: 发票管理
    name: 发票列表-退票
    url: /invoice/invoiceQueryRetreat
-->
<template>
  <div class="main_content">
    <div class="header_invioce">
      <h3>作废/冲红查询</h3>
    </div>

    <a-tabs default-active-key="1" v-model="activeKey" @change="callback">
      <a-tab-pane v-for="item in astList" :key="item.key">
        <span slot="tab">{{ item.title }}</span>
        <InvoiceRetreatItem v-if="activeKey == item.key" :tabNum='item.tabNum' :key="timer" :businessStatus="item.id" />
      </a-tab-pane>
    </a-tabs>

  </div>
</template>

<script>
import InvoiceRetreatItem from './modules/invoiceRetreatItem'
import status from '@/utils/invoicingStatus'
export default {
  name: 'invoiceQueryRetreat',
  components:{
    InvoiceRetreatItem
  },
  data(){
    return{
      astList: status.refundInvoiceList,
      activeKey: status.refundInvoiceList[0].key,
      timer:null,
    }
  },
  mounted() {
    this.showtabs();//跳转到指定tab
  },
  methods:{
    callback(key){
      this.timer = new Date().getTime();
    },
    showtabs(){
      if (this.$route.query.pagetab){
        this.activeKey = this.$route.query.pagetab;
      }
    },
  }
}
</script>

<style scoped lang="less">
.main_content{
  color: @color-smudge;
}

h3,h4{
  font-weight: bolder;
}
h3{
  font-size: 20px;
}
h4{
  font-size: 18px;
  margin-bottom: 20px;
}

.header_invioce{
  width: 100%;
  display: flex;
  align-items: center;
}
</style>
